<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <script type="text/javascript">
		//  按照省份下拉列表框的顺序定义二维数组,将城市列表对应到省份
		var city = [
					["北京","天津","上海","重庆"],				//  直辖市
					["石家庄","邯郸","唐山","保定"],			//  河北
					["福州","厦门","龙岩","南平"],				//  福建
					["南京","苏州","无锡","常州"]				//  江苏
				   ];
		/*
		 *  二级菜单
		 */
		function getCity(){
			//获得身省份和城市下拉列表框的引用
			var province=document.forms["prov"].elements["province"];
			var sltCity=document.forms["prov"].elements["city"];
			
			//得到对应于省份的城市列表数组
			var provinceCity=city[province.selectedIndex-1];
			
			//将城市下拉列表框清空，仅留第一个提示选项
			sltCity.length=1;
		
			//将相应省市的城市填充到城市选择框中
			for(var i=0;i<provinceCity.length;i++){
				//创建新的Option对象并将其添加到城市下拉列表框中
				sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);
			}
		}		   
	</script>
  </head>
  
  <body> 
  <form action="" name="prov">
    <select name="province" onchange="getCity()">
      		<option value="0">请选择所在省份</option>
      		<option value="直辖市">直辖市</option>
      		<option value="河北">河北</option>
      		<option value="福建">福建</option>
      		<option value="江苏">江苏</option>
    </select>
	<select name="city">
		<option value="0">请选择所在城市</option>
	</select>
</form>
  </body>
</html>
